<template>
    <div class="manageByfirst">
      <el-button type="primary" @click="addFirstCate">添加分类</el-button>
        <template>
      <el-table
        :data="firstform"
        :stripe ='true'
        border
        @selection-change="handleSelectionChange"
        style="width: 100%; margin-top:15px">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="分类的编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="categoryName"
          label="分类名称"
          width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加分类对话框 -->
      <el-dialog title="添加分类" :visible.sync="adddialogFormVisible">
        <el-form :model="addform" :rules="addrules" ref="addform">
          <el-form-item  prop="categoryName">
            <el-input v-model="addform.categoryName" placeholder="请输入添加名称" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="adddialogFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="updataBtn('addform')">保存</el-button>
        </div>
      </el-dialog>
      <!-- 添加编辑对话框 -->
      <el-dialog title="添加分类"  :visible.sync="editdialogFormVisible">
        <el-form  :model="editform" :rules="editrules" ref="editform" >
           <el-form-item prop="categoryName">
            <el-input v-model="editform.categoryName" placeholder="请输入添加名称" autocomplete="off"></el-input>
           </el-form-item>
        </el-form>
        <template>
          <el-select v-model="selectValue" placeholder="请选择" style="margin-top:15px">
            <el-option
              v-for="item in editoptions"
              :key="item.id"
              :label="item.value"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editdialogFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="editBtn('editform')">保存</el-button>
        </div>
      </el-dialog>
      <!-- 分页页面 -->
       <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageObj.page"
            :page-sizes="[2, 4, 6, 8]"
            :page-size="pageObj.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

</template>
    </div>
</template>

<script>
import { selectFirstList, addFirstList, editFirstCate } from '@/api'
export default {
  data () {
    return {
      // 一级分类表单
      firstform: [],
      // 分页对象
      pageObj: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      // 添加分类
      adddialogFormVisible: false,
      addform: {
        categoryName: ''
      },
      addrules: {
        categoryName: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ]
      },
      // 编辑分类
      editdialogFormVisible: false,
      editrules: {
        categoryName: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ]
      },
      editoptions: [
        {
          value: '启动',
          id: 1
        },
        {
          value: '禁用',
          id: 0
        }
      ],
      selectValue: '',
      editform: {
        categoryName: ''
      },
      isDelete: '',
      editUpdateform: {
        id: '',
        categoryName: '',
        isDelete: ''
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    /* 编辑提交 */
    editBtn (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editUpdateform.categoryName = this.editform.categoryName
          this.editUpdateform.isDelete = this.selectValue
          console.log(this.editUpdateform)
          editFirstCate(this.editUpdateform).then(res => {
            if (res.success) {
              this.$message({
                message: '更新成功',
                type: 'success'
              })
              this.init()
              this.editdialogFormVisible = false
            } else {
              this.$message({
                message: res.data.message,
                type: 'success'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /* 编辑删除 */
    handleEdit (index, row) {
      this.editform.categoryName = row.categoryName
      this.selectValue = row.isDelete
      this.editUpdateform.id = row.id
      this.editdialogFormVisible = true
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    /* 分页逻辑 */
    handleSizeChange (val) {
      this.pageObj.pageSize = val
      this.init()
    },
    handleCurrentChange (val) {
      this.pageObj.page = val
      this.init()
    },
    /* 初始化 */
    init () {
      selectFirstList(this.pageObj).then(res => {
        this.firstform = res.rows
        this.total = res.total
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 添加显示对话框
    addFirstCate () {
      this.adddialogFormVisible = true
    },
    // 添加分类
    updataBtn (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addFirstList(this.addform).then(res => {
            if (res.data.success) {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.init()
              this.adddialogFormVisible = false
            } else {
              this.$message({
                message: res.data.message,
                type: 'warning'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
